<template>
    <div class="all">
        <Music_item v-for="(item) in list" :list="item"></Music_item>
    </div>
</template>

<script>
    import {getSong} from "../../../network/m_home";
    import Music_item from "./Music_item";
    export default {
        name: "Music_m",
        data(){
            return{
                list:[],
                page:0,
            }
        },
        activated() {
            // this.$refs.scroll.scrollTo(0,this.saveY)
            // this.$refs.scroll.fresh1()
        },
        deactivated() {
            // 1.保存Y
            // console.log(this.saveY)
            // this.saveY = this.$refs.scroll.getscroll()
        },
        computed:{
          more_music(){
              return this.$store.state.more_music
          }
        },
        components:{
            Music_item
        },
        created() {
            this.getSongs();
        },
        methods:{
            async getSongs(){
                const page = this.page+1;
                await getSong(page).then(res => {
                    if(res.data.length < 6) {
                        this.$store.state.music_ok = true;
                        console.log(this.$store.state.music_ok)
                    }
                    this.list.push(...res.data);
                    console.log(this.list)
                });
                this.page++;
                this.$bus.$emit("music_ok")
            }
        },
        watch:{
            more_music:function () {
                this.getSongs();

            }
        }
    }
</script>

<style scoped>
    .all{
        z-index: 9;
        display: flex;
        flex-wrap: wrap;
        /*flex-flo;*/
        justify-content: space-evenly;
        padding-top: 3%;
    }
</style>